<template name="reward">
	<view>
		<view class="cu-modal bottom-modal" :class="modalName=='rankModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog bg bg-white" @tap.stop="">
				<scroll-view scroll-x class="bg-white nav" scroll-with-animation :scroll-left="scrollLeft">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="0==TabCur?'text-orange cur':''" @tap="tabSelect" :data-id="0">
							打赏榜
						</view>
						<view class="cu-item flex-sub" :class="1==TabCur?'text-orange cur':''" @tap="tabSelect" :data-id="1">
							邀约榜
						</view>
					</view>
				</scroll-view>
				<view class="" v-if="0==TabCur">
					<view class="bg-gray space-between padding-sm">
						<view class="">TOP10</view>
						<view class="">打赏数</view>
					</view>
					<view class="rank-view margin-lr">
						<view class="rank-item space-between" v-for="(item,index) in rank_list" v-bind:key="index">
							<view class="n" :class="'n'+(index+1)">{{index+1}}</view>
							<view class="avatar cu-avatar default_avatar round">
								<image v-if="item.member && item.member.head_portrait" :src="item.member.head_portrait" mode="aspectFill"></image>
							</view>
							<view class="name text-left">
								<text v-if="item.member">{{item.member.nickname}}</text>
							</view>
							<view class="count">
								<text class="text-price">{{item.total}}</text>
							</view>
						</view>
						<view class="cu-load margin-center" :class="loading?'loading':''"></view>
					</view>
					<view class="space-between padding-sm align-center border-top">
						<view class="a align-center">
							<image :src="member.head_portrait" mode="aspectFill" class="avatar round margin-right-sm"></image>
							{{member.nickname}}
						</view>
						<view class="cu-btn bg-red text-white round" @tap="modalName='rewardModal'">送礼</view>
					</view>
				</view>
				<view v-else>
					<view class="bg-gray space-between padding-sm">
						<view class="">TOP10</view>
						<view class="">邀请人数</view>
					</view>
					<view class="rank-view margin-lr">
						<view class="rank-item space-between" v-for="(item,index) in rank_list2" v-bind:key="index">
							<view class="n" :class="'n'+(index+1)">{{index+1}}</view>
							<view class="avatar">
								<image v-if="item.member && item.member.head_portrait" :src="item.member.head_portrait" mode="aspectFill"></image>
								<image v-else src="https://gsconline-1251028293.cos.ap-guangzhou.myqcloud.com/images/2020/05/19/image_158987220710257979.png"
								 mode="aspectFill"></image>
							</view>
							<view class="name text-left">
								<text v-if="item.member">{{item.member.nickname}}</text>
							</view>
							<view class="count">
								<text v-if="item.member">{{item.total}}</text>
							</view>
						</view>
						<view class="cu-load margin-center" :class="loading?'loading':''"></view>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal" :class="modalName=='rewardModal'?'show':''" @tap="hideModal">
			<view class="cu-dialog bg bg-white" @tap.stop="">
				<view class="">
					<view class="text-xl text-bold text-black margin-lr margin-top">请选择打赏金额</view>
					<view class="reward-money-view margin-top">
						<view class="grid col-3">
							<view @tap="selectMoney(index, item)" class="reward-money-item" :class="curMoney==index?'cur':''" v-for="(item,index) in rewardMoney"
							 v-bind:key="index"><text>{{item}}元</text></view>
						</view>
					</view>
					<view class="margin-top text-lg text-bold text-left margin-lr">
						自定义金额
					</view>
					<view class="margin-top margin-lr">
						<input name="inputMoney" v-model="inputMoney" class="inputMoney" type="number" @blur="commentBlur()" />
					</view>
					<view class="margin-top margin-lr text-gray tips text-left">
						您好，打赏是自愿赠送给管理员或平台的虚拟商品，且为用户自愿行为。付完成后，除因法定情形规定或者违反其他相关规定的情况外，支付金额支持退款或者兑换。
					</view>
					<view class="margin-tb">
						<view class="text-red">{{error}}</view>
						<button class="margin-tb cu-btn bg-yellow shadow round text-white text-lg btn-reward" @tap="submitReward">打赏</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "reward",
		props: {
			live_id: {
				type: String,
				default: '0'
			}
		},
		data() {
			return {
				modalName: null,
				rewardMoney: [
					5, 10, 15, 20, 25, 50
				],
				curMoney: null,
				chooseMoney: 0,
				inputMoney: "",
				error: '',
				loading: false,
				rank_list: [],
				rank_list2: [],
				scrollLeft: 0,
				TabCur: 0,
				member: null,
			}
		},
		destroyed() {},
		created: function(e) {
			this.member = this.$common.getCache('member')
		},
		methods: {
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
				this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60
				if (this.TabCur == 0) {
					this.getRank()
				} else this.getRank2()
			},
			getRank2() {
				this.loading = true
				this.$http
					.get('college_invite_rank', {
						id: this.live_id
					})
					.then((response) => {
						this.rank_list2 = response.data.data
						this.loading = false
					})
					.catch((response) => {
						console.log(response)
					})
			},
			getRank() {
				this.loading = true
				this.$http
					.get('college_reward_rank', {
						id: this.live_id
					})
					.then((response) => {
						this.rank_list = response.data.data
						this.loading = false
					})
					.catch((response) => {
						console.log(response)
					})
			},
			mini_pay(group, data) {
				this.$miniProgramPay.createPay(group, data)
					.then((response) => {
						console.log(response)
						this.$common.showSuccess('打赏成功', (res) => {
							this.modalName = null
							this.rewardChange(data)
						})
						uni.hideLoading()
						this.loading = false
					})
					.catch((response) => {
						uni.hideLoading()
						console.log(response)
						this.loading = false
					})
			},
			submitReward() {
				this.error = ''
				let _this = this
				let money = 0
				if (parseFloat(this.inputMoney) > 0) {
					money = parseFloat(this.inputMoney)
				} else money = this.chooseMoney

				if (money > 0) {
					uni.showLoading({
						title: '加载中...'
					})
					// #ifdef MP-WEIXIN
					this.mini_pay('reward', {
						live_id: parseInt(this.live_id),
						money: money
					})
					// #endif

					// #ifdef H5
					this.$jwx.createPay('reward', {
							live_id: parseInt(this.live_id),
							money: money
						}).then((response) => {
							uni.hideLoading()
							this.$common.showSuccess('打赏成功', (res) => {
								this.modalName = null
								this.rewardChange(data)
							})
						})
						.catch((response) => {
							console.log(response)
							uni.hideLoading()
							this.loading = false
						})
					// #endif
				} else {
					this.error = '金额不能为0'
				}
			},
			openModal(name) {
				this.modalName = name
				if (this.modalName == 'rankModal') {
					this.getRank()
				}
			},
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
				if (this.modalName == 'rankModal') {
					this.getRank()
				}
			},
			commentBlur() {
				window.scroll(0, 0)
			},
			hideModal(e) {
				this.modalName = null
			},
			selectMoney(index, money) {
				this.curMoney = index
				this.chooseMoney = money
			},
			rewardChange(data) {
				this.$emit("pRewardChange", data)
			},
		}
	}
</script>

<style>
	.space-between {
		display: flex;
		justify-content: space-between;
	}

	.bg {
		border-radius: 30rpx 30rpx 0 0 !important;
		overflow: hidden;
	}

	.reward-money-item {
		text-align: center;
	}

	.reward-money-item text {
		width: 80%;
		height: 70rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffe7c2;
		color: #333;
		margin: 10rpx auto;
		border-radius: 30rpx;
		font-weight: bold;
	}

	.reward-money-item.cur text {
		background-color: #fdb242;
		color: #FFF;
	}

	.inputMoney {
		width: 100%;
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1px solid #EEE;
		text-align: left;
		font-size: 32rpx;
	}

	.tips {
		color: #D0D0D0;
	}

	.btn-reward {
		width: 80%;
		padding: 40rpx 0;
	}

	.rank-view {
		height: 50vh;
		overflow: auto;
	}

	.rank-item {
		height: 100rpx;
		overflow: hidden;
		align-items: center;
		margin: 20rpx 0;
		font-size: 30rpx;
	}

	.rank-item .n {
		width: 30rpx;
		min-width: 40rpx;
		color: #B4B4B4;
	}

	.rank-item .n1 {
		color: #e80909;
	}

	.rank-item .n2 {
		color: #FF7200;
	}

	.rank-item .n3 {
		color: #F5D501;
	}

	.rank-item .avatar {
		width: 100rpx;
		height: 100rpx;
		min-width: 100rpx;
		margin: 10rpx;
	}

	.rank-item .avatar image {
		width: 100%;
		height: 100%;
		border-radius: 50%;
	}

	.rank-item .name {
		width: 100%;
		font-weight: bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.rank-item .count {
		width: 160rpx;
		min-width: 160rpx;
		text-align: right;
		font-weight: bold;
	}

	.a {
		display: flex;
	}

	.avatar {
		width: 60rpx;
		height: 60rpx;
	}

	.border-top {
		border-top: 1px solid #EEE;
	}
</style>
